<template>
  <div class="pause-menu-overlay" @click="handleOverlayClick">
    <div class="pause-menu" @click.stop>
      <div class="pause-header">
        <div class="pause-icon">
          <i class="icon-pause"></i>
        </div>
        <h2>游戏暂停</h2>
        <p class="pause-subtitle">游戏已暂停，选择一个操作继续</p>
      </div>

      <!-- 游戏统计信息 -->
      <div class="game-stats">
        <div class="stat-item">
          <div class="stat-label">当前分数</div>
          <div class="stat-value">{{ formattedScore }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">距离</div>
          <div class="stat-value">{{ formattedDistance }}m</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">游戏时间</div>
          <div class="stat-value">{{ formattedPlayTime }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">生命值</div>
          <div class="stat-value">{{ currentHealth }}/{{ maxHealth }}</div>
        </div>
      </div>

      <!-- 菜单按钮 -->
      <div class="menu-buttons">
        <button 
          class="menu-btn primary"
          @click="resumeGame"
          :disabled="isLoading"
        >
          <i class="icon-play"></i>
          <span>继续游戏</span>
          <div class="btn-shortcut">空格键</div>
        </button>

        <button 
          class="menu-btn secondary"
          @click="restartGame"
          :disabled="isLoading"
        >
          <i class="icon-restart"></i>
          <span>重新开始</span>
          <div class="btn-shortcut">R</div>
        </button>

        <button 
          class="menu-btn secondary"
          @click="showSettings"
          :disabled="isLoading"
        >
          <i class="icon-settings"></i>
          <span>设置</span>
        </button>

        <button 
          class="menu-btn secondary"
          @click="showHelp"
          :disabled="isLoading"
        >
          <i class="icon-help"></i>
          <span>帮助</span>
        </button>

        <button 
          class="menu-btn danger"
          @click="goToMenu"
          :disabled="isLoading"
        >
          <i class="icon-home"></i>
          <span>返回主菜单</span>
          <div class="btn-shortcut">ESC</div>
        </button>
      </div>

      <!-- 快捷键提示 -->
      <div class="shortcuts-hint">
        <div class="hint-title">快捷键</div>
        <div class="shortcuts">
          <div class="shortcut-item">
            <kbd>空格</kbd> 继续游戏
          </div>
          <div class="shortcut-item">
            <kbd>R</kbd> 重新开始
          </div>
          <div class="shortcut-item">
            <kbd>ESC</kbd> 返回主菜单
          </div>
        </div>
      </div>

      <!-- 设置面板 -->
      <div v-if="showSettingsPanel" class="settings-panel">
        <div class="settings-header">
          <h3>游戏设置</h3>
          <button class="close-btn" @click="hideSettings">
            <i class="icon-close"></i>
          </button>
        </div>
        
        <div class="settings-content">
          <div class="setting-group">
            <label class="setting-label">音效音量</label>
            <div class="volume-control">
              <input 
                type="range" 
                min="0" 
                max="100" 
                v-model="tempSettings.soundVolume"
                class="volume-slider"
              >
              <span class="volume-value">{{ tempSettings.soundVolume }}%</span>
            </div>
          </div>

          <div class="setting-group">
            <label class="setting-label">音乐音量</label>
            <div class="volume-control">
              <input 
                type="range" 
                min="0" 
                max="100" 
                v-model="tempSettings.musicVolume"
                class="volume-slider"
              >
              <span class="volume-value">{{ tempSettings.musicVolume }}%</span>
            </div>
          </div>

          <div class="setting-group">
            <label class="setting-label">
              <input 
                type="checkbox" 
                v-model="tempSettings.soundEnabled"
                class="setting-checkbox"
              >
              启用音效
            </label>
          </div>

          <div class="setting-group">
            <label class="setting-label">
              <input 
                type="checkbox" 
                v-model="tempSettings.musicEnabled"
                class="setting-checkbox"
              >
              启用背景音乐
            </label>
          </div>

          <div class="setting-group">
            <label class="setting-label">控制方式</label>
            <select v-model="tempSettings.controlScheme" class="setting-select">
              <option value="keyboard">键盘控制</option>
              <option value="touch">触摸控制</option>
              <option value="both">键盘+触摸</option>
            </select>
          </div>
        </div>

        <div class="settings-actions">
          <button class="btn secondary" @click="resetSettings">重置默认</button>
          <button class="btn primary" @click="saveSettings">保存设置</button>
        </div>
      </div>

      <!-- 帮助面板 -->
      <div v-if="showHelpPanel" class="help-panel">
        <div class="help-header">
          <h3>游戏帮助</h3>
          <button class="close-btn" @click="hideHelp">
            <i class="icon-close"></i>
          </button>
        </div>
        
        <div class="help-content">
          <div class="help-section">
            <h4>游戏目标</h4>
            <p>控制角色在跑酷场景中奔跑，避开障碍物，收集金币和道具，获得最高分数。</p>
          </div>

          <div class="help-section">
            <h4>控制方式</h4>
            <div class="controls-list">
              <div class="control-item">
                <kbd>空格键</kbd> 跳跃
              </div>
              <div class="control-item">
                <kbd>↓</kbd> 滑铲
              </div>
              <div class="control-item">
                <kbd>←/→</kbd> 左右移动
              </div>
              <div class="control-item">
                <kbd>P</kbd> 暂停游戏
              </div>
            </div>
          </div>

          <div class="help-section">
            <h4>道具效果</h4>
            <div class="powerups-list">
              <div class="powerup-item">
                <i class="icon-magnet"></i> 磁铁 - 自动收集金币
              </div>
              <div class="powerup-item">
                <i class="icon-speed"></i> 加速 - 提高移动速度
              </div>
              <div class="powerup-item">
                <i class="icon-shield"></i> 护盾 - 免疫伤害
              </div>
              <div class="powerup-item">
                <i class="icon-star"></i> 双倍分数 - 分数翻倍
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载指示器 -->
      <div v-if="isLoading" class="loading-overlay">
        <div class="loading-spinner"></div>
        <div class="loading-text">{{ loadingText }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, reactive, onMounted, onUnmounted } from 'vue'

/**
 * 暂停菜单组件
 * 显示游戏暂停时的菜单选项和游戏统计信息
 * @component
 * @example
 * <PauseMenu 
 *   :score="1000"
 *   :distance="500"
 *   :play-time="120"
 *   :current-health="75"
 *   :max-health="100"
 *   @resume="handleResume"
 *   @restart="handleRestart"
 *   @go-to-menu="handleGoToMenu"
 * />
 */

interface GameSettings {
  soundEnabled: boolean
  musicEnabled: boolean
  soundVolume: number
  musicVolume: number
  controlScheme: 'keyboard' | 'touch' | 'both'
}

interface Props {
  /** 当前分数 */
  score?: number
  /** 当前距离 */
  distance?: number
  /** 游戏时间（秒） */
  playTime?: number
  /** 当前生命值 */
  currentHealth?: number
  /** 最大生命值 */
  maxHealth?: number
  /** 游戏设置 */
  settings?: GameSettings
  /** 是否允许点击遮罩关闭 */
  allowOverlayClose?: boolean
}

interface Emits {
  /** 继续游戏 */
  (e: 'resume'): void
  /** 重新开始游戏 */
  (e: 'restart'): void
  /** 返回主菜单 */
  (e: 'go-to-menu'): void
  /** 设置更新 */
  (e: 'settings-updated', settings: GameSettings): void
}

const props = withDefaults(defineProps<Props>(), {
  score: 0,
  distance: 0,
  playTime: 0,
  currentHealth: 100,
  maxHealth: 100,
  settings: () => ({
    soundEnabled: true,
    musicEnabled: true,
    soundVolume: 80,
    musicVolume: 60,
    controlScheme: 'keyboard'
  }),
  allowOverlayClose: true
})

const emit = defineEmits<Emits>()

// 响应式数据
const isLoading = ref(false)
const loadingText = ref('')
const showSettingsPanel = ref(false)
const showHelpPanel = ref(false)

// 临时设置（用于设置面板）
const tempSettings = reactive<GameSettings>({
  soundEnabled: props.settings.soundEnabled,
  musicEnabled: props.settings.musicEnabled,
  soundVolume: props.settings.soundVolume,
  musicVolume: props.settings.musicVolume,
  controlScheme: props.settings.controlScheme
})

// 计算属性
const formattedScore = computed(() => {
  return props.score.toLocaleString()
})

const formattedDistance = computed(() => {
  return Math.floor(props.distance).toLocaleString()
})

const formattedPlayTime = computed(() => {
  const minutes = Math.floor(props.playTime / 60)
  const seconds = Math.floor(props.playTime % 60)
  return `${minutes}:${seconds.toString().padStart(2, '0')}`
})

/**
 * 处理遮罩点击
 */
const handleOverlayClick = (): void => {
  if (props.allowOverlayClose && !showSettingsPanel.value && !showHelpPanel.value) {
    resumeGame()
  }
}

/**
 * 继续游戏
 */
const resumeGame = (): void => {
  if (isLoading.value) return
  emit('resume')
}

/**
 * 重新开始游戏
 */
const restartGame = (): void => {
  if (isLoading.value) return
  
  isLoading.value = true
  loadingText.value = '重新开始游戏...'
  
  setTimeout(() => {
    emit('restart')
    isLoading.value = false
  }, 500)
}

/**
 * 返回主菜单
 */
const goToMenu = (): void => {
  if (isLoading.value) return
  
  isLoading.value = true
  loadingText.value = '返回主菜单...'
  
  setTimeout(() => {
    emit('go-to-menu')
    isLoading.value = false
  }, 500)
}

/**
 * 显示设置面板
 */
const showSettings = (): void => {
  // 重置临时设置
  Object.assign(tempSettings, props.settings)
  showSettingsPanel.value = true
}

/**
 * 隐藏设置面板
 */
const hideSettings = (): void => {
  showSettingsPanel.value = false
}

/**
 * 显示帮助面板
 */
const showHelp = (): void => {
  showHelpPanel.value = true
}

/**
 * 隐藏帮助面板
 */
const hideHelp = (): void => {
  showHelpPanel.value = false
}

/**
 * 保存设置
 */
const saveSettings = (): void => {
  emit('settings-updated', { ...tempSettings })
  hideSettings()
}

/**
 * 重置设置为默认值
 */
const resetSettings = (): void => {
  Object.assign(tempSettings, {
    soundEnabled: true,
    musicEnabled: true,
    soundVolume: 80,
    musicVolume: 60,
    controlScheme: 'keyboard'
  })
}

/**
 * 处理键盘事件
 * @param event - 键盘事件
 */
const handleKeydown = (event: KeyboardEvent): void => {
  if (showSettingsPanel.value || showHelpPanel.value) {
    if (event.key === 'Escape') {
      hideSettings()
      hideHelp()
    }
    return
  }

  switch (event.key) {
    case ' ':
    case 'Enter':
      event.preventDefault()
      resumeGame()
      break
    case 'r':
    case 'R':
      event.preventDefault()
      restartGame()
      break
    case 'Escape':
      event.preventDefault()
      goToMenu()
      break
  }
}

// 生命周期钩子
onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})
</script>

<style lang="scss" scoped>
.pause-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);

  .pause-menu {
    background: white;
    border-radius: $border-radius-lg;
    padding: $spacing-xl;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: $shadow-lg;

    .pause-header {
      text-align: center;
      margin-bottom: $spacing-lg;

      .pause-icon {
        width: 60px;
        height: 60px;
        background: $primary-color;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto $spacing-md;

        i {
          font-size: 24px;
          color: white;
        }
      }

      h2 {
        margin: 0 0 $spacing-sm 0;
        color: $text-color;
        font-size: 1.5rem;
      }

      .pause-subtitle {
        margin: 0;
        color: $text-secondary;
        font-size: 0.875rem;
      }
    }

    .game-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: $spacing-sm;
      margin-bottom: $spacing-lg;
      padding: $spacing-md;
      background: $bg-secondary;
      border-radius: $border-radius-md;

      .stat-item {
        text-align: center;

        .stat-label {
          font-size: 0.75rem;
          color: $text-secondary;
          margin-bottom: $spacing-xs;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .stat-value {
          font-size: 1.25rem;
          font-weight: bold;
          color: $primary-color;
          font-family: 'Courier New', monospace;
        }
      }
    }

    .menu-buttons {
      display: flex;
      flex-direction: column;
      gap: $spacing-sm;
      margin-bottom: $spacing-lg;

      .menu-btn {
        display: flex;
        align-items: center;
        gap: $spacing-sm;
        padding: $spacing-md $spacing-lg;
        border: none;
        border-radius: $border-radius-md;
        font-size: 1rem;
        cursor: pointer;
        transition: $transition-normal;
        position: relative;
        text-align: left;

        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

        i {
          font-size: 1.25rem;
          width: 20px;
          text-align: center;
        }

        span {
          flex: 1;
        }

        .btn-shortcut {
          font-size: 0.75rem;
          opacity: 0.7;
          background: rgba(0, 0, 0, 0.1);
          padding: 2px 6px;
          border-radius: $border-radius-sm;
        }

        &.primary {
          background: $primary-color;
          color: white;

          &:hover:not(:disabled) {
            background: darken($primary-color, 10%);
            transform: translateY(-2px);
          }
        }

        &.secondary {
          background: $bg-secondary;
          color: $text-color;

          &:hover:not(:disabled) {
            background: darken($bg-secondary, 5%);
            transform: translateY(-2px);
          }
        }

        &.danger {
          background: $danger-color;
          color: white;

          &:hover:not(:disabled) {
            background: darken($danger-color, 10%);
            transform: translateY(-2px);
          }
        }
      }
    }

    .shortcuts-hint {
      text-align: center;
      padding: $spacing-md;
      background: $bg-secondary;
      border-radius: $border-radius-md;
      margin-bottom: $spacing-lg;

      .hint-title {
        font-size: 0.75rem;
        color: $text-secondary;
        margin-bottom: $spacing-sm;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .shortcuts {
        display: flex;
        justify-content: center;
        gap: $spacing-md;
        flex-wrap: wrap;

        .shortcut-item {
          font-size: 0.75rem;
          color: $text-secondary;

          kbd {
            background: white;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 2px 6px;
            font-family: monospace;
            font-size: 0.75rem;
            margin-right: 4px;
          }
        }
      }
    }

    .settings-panel,
    .help-panel {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: white;
      border-radius: $border-radius-lg;
      padding: $spacing-xl;
      overflow-y: auto;

      .settings-header,
      .help-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: $spacing-lg;
        padding-bottom: $spacing-md;
        border-bottom: 1px solid $bg-secondary;

        h3 {
          margin: 0;
          color: $text-color;
        }

        .close-btn {
          background: none;
          border: none;
          font-size: 1.5rem;
          cursor: pointer;
          color: $text-secondary;
          padding: $spacing-xs;

          &:hover {
            color: $text-color;
          }
        }
      }

      .settings-content {
        .setting-group {
          margin-bottom: $spacing-lg;

          .setting-label {
            display: block;
            margin-bottom: $spacing-sm;
            font-weight: 500;
            color: $text-color;
          }

          .volume-control {
            display: flex;
            align-items: center;
            gap: $spacing-sm;

            .volume-slider {
              flex: 1;
              height: 6px;
              border-radius: 3px;
              background: $bg-secondary;
              outline: none;
              cursor: pointer;

              &::-webkit-slider-thumb {
                appearance: none;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background: $primary-color;
                cursor: pointer;
              }
            }

            .volume-value {
              font-size: 0.875rem;
              color: $text-secondary;
              min-width: 40px;
              text-align: right;
            }
          }

          .setting-checkbox {
            margin-right: $spacing-sm;
          }

          .setting-select {
            width: 100%;
            padding: $spacing-sm;
            border: 1px solid #ccc;
            border-radius: $border-radius-sm;
            background: white;
          }
        }
      }

      .settings-actions {
        display: flex;
        gap: $spacing-sm;
        justify-content: flex-end;
        padding-top: $spacing-md;
        border-top: 1px solid $bg-secondary;

        .btn {
          padding: $spacing-sm $spacing-md;
          border: none;
          border-radius: $border-radius-sm;
          cursor: pointer;
          transition: $transition-normal;

          &.primary {
            background: $primary-color;
            color: white;

            &:hover {
              background: darken($primary-color, 10%);
            }
          }

          &.secondary {
            background: $bg-secondary;
            color: $text-color;

            &:hover {
              background: darken($bg-secondary, 5%);
            }
          }
        }
      }
    }

    .help-content {
      .help-section {
        margin-bottom: $spacing-lg;

        h4 {
          margin: 0 0 $spacing-sm 0;
          color: $primary-color;
        }

        p {
          margin: 0 0 $spacing-sm 0;
          color: $text-secondary;
          line-height: 1.5;
        }

        .controls-list,
        .powerups-list {
          display: flex;
          flex-direction: column;
          gap: $spacing-xs;

          .control-item,
          .powerup-item {
            display: flex;
            align-items: center;
            gap: $spacing-sm;
            font-size: 0.875rem;
            color: $text-secondary;

            kbd {
              background: $bg-secondary;
              border: 1px solid #ccc;
              border-radius: 3px;
              padding: 2px 6px;
              font-family: monospace;
              font-size: 0.75rem;
            }

            i {
              font-size: 1rem;
            }
          }
        }
      }
    }

    .loading-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.9);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: $border-radius-lg;

      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid $bg-secondary;
        border-top: 4px solid $primary-color;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: $spacing-md;
      }

      .loading-text {
        color: $text-secondary;
        font-size: 0.875rem;
      }
    }
  }
}

// 动画定义
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 图标样式
.icon-pause::before { content: '⏸️'; }
.icon-play::before { content: '▶️'; }
.icon-restart::before { content: '🔄'; }
.icon-settings::before { content: '⚙️'; }
.icon-help::before { content: '❓'; }
.icon-home::before { content: '🏠'; }
.icon-close::before { content: '×'; }

// 响应式设计
@media (max-width: $breakpoint-md) {
  .pause-menu-overlay .pause-menu {
    padding: $spacing-lg;
    max-width: 400px;

    .game-stats {
      grid-template-columns: 1fr;
      gap: $spacing-xs;
    }

    .shortcuts .shortcuts {
      flex-direction: column;
      gap: $spacing-xs;
    }
  }
}
</style>